<template>
  <div class="sheep-death-container">
    <!-- 新增按钮 -->
    <el-button type="primary" @click="addSheepDeath" style="margin-bottom: 12px;">新增</el-button>
    <!-- 查询表单 -->
    <el-form :inline="true" :model="QueryInfo" class="search-form" style="margin-bottom: 16px;">
      <el-form-item label="耳号">
        <el-input v-model="QueryInfo.SheepEarNumber" placeholder="请输入耳号" clearable style="width: 140px" />
      </el-form-item>
      <el-form-item label="死亡日期">
        <el-date-picker v-model="QueryInfo.DeathDate" type="date" placeholder="请选择死亡日期" value-format="YYYY-MM-DD" style="width: 180px" />
      </el-form-item>
      <el-form-item label="死亡原因">
        <el-input v-model="QueryInfo.DeathReason" placeholder="请输入死亡原因" clearable style="width: 140px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="show">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 顶部表格 -->
    <el-table :data="tableData" border stripe highlight-current-row v-loading="loading">
      <el-table-column type="selection" width="50" />
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="SheepEarNumber" label="耳号" width="120" align="center" />
      <el-table-column prop="DeathDate" label="死亡日期" width="120" align="center">
        <template #default="scope">
          {{ scope.row.DeathDate ? scope.row.DeathDate.slice(0, 10) : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="DeathReason" label="死亡原因" width="120" align="center" />
      <el-table-column prop="Breed" label="品种" width="100" align="center" />
      <el-table-column prop="Gender" label="性别" width="80" align="center" />
      <el-table-column prop="ReproductiveStatus" label="状态" width="100" align="center">
        <template #default="scope">
          <el-button type="text" @click="toggleStatus(scope.row)">
            <span :style="{color: scope.row.ReproductiveStatus === '启用' ? '#67C23A' : '#F56C6C'}">
              {{ scope.row.ReproductiveStatus === '启用' ? '启用' : '禁用' }}
            </span>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="DeathMonthAge" label="死亡月龄" width="100" align="center" />
      <el-table-column prop="DeathDayAge" label="死亡日龄" width="100" align="center" />
      <el-table-column prop="HousetypeName" label="死亡栋舍" width="100" align="center" />
      <el-table-column prop="FieldName" label="死亡栏位" width="100" align="center" />
      <el-table-column prop="BirthDate" label="出生日期" width="120" align="center">
        <template #default="scope">
          {{ scope.row.BirthDate ? scope.row.BirthDate.slice(0, 10) : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="CreatorId" label="创建人" width="100" align="center" />
      <el-table-column prop="CreateTime" label="创建时间" width="160" align="center">
        <template #default="scope">
          {{ scope.row.CreateTime ? scope.row.CreateTime.slice(0, 10) : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="ModifierId" label="修改人" width="100" align="center" />
      <el-table-column prop="ModifyTime" label="修改时间" width="160" align="center">
        <template #default="scope">
          {{ scope.row.ModifyTime ? scope.row.ModifyTime.slice(0, 10) : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="AuditorId" label="审核人" width="100" align="center" />
      <el-table-column prop="AuditTime" label="审核时间" width="160" align="center">
        <template #default="scope">
          {{ scope.row.AuditTime ? scope.row.AuditTime.slice(0, 10) : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="OrderNumber" label="单据号" width="120" align="center" />
      <el-table-column label="操作" width="100" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" @click="editSheepDeath(scope.row)" :disabled="scope.row.ReproductiveStatus !== '启用'">编辑</el-button>
          <el-button type="danger" size="small" @click="deleteSheepDeath(scope.row)" :disabled="scope.row.ReproductiveStatus !== '启用'">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination-section">
      <el-pagination
        v-model:current-page="QueryInfo.PageIndex"
        v-model:page-size="QueryInfo.PageSize"
        :page-sizes="[10, 15, 20, 50, 100]"
        layout="sizes, prev, pager, next, jumper, total"
        :total="QueryInfo.TotalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 底部表格 -->
    
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Sheep_BreedingWrite } from '@/utils/Interceptors';
import { useRouter } from 'vue-router';

const router = useRouter();
const loading = ref(false)
const tableData = ref<any[]>([])
const bottomTableData = ref<any[]>([])

const QueryInfo = reactive({
  SheepEarNumber: '',
  DeathDate: '',
  DeathReason: '',
  PageIndex: 1,
  PageSize: 20,
  TotalCount: 0
})

const handleSizeChange = (val: number) => {
  QueryInfo.PageSize = val
  show()
}
const handleCurrentChange = (val: number) => {
  QueryInfo.PageIndex = val
  show()
}
const show=()=>{
  Sheep_BreedingWrite.get("/api/SheepDeath/all",{params:QueryInfo}).then(res=>{
    console.log('后端返回数据:', res.data.data)
    if (res.data && res.data.code === 200) {
      tableData.value = res.data.data || []
      QueryInfo.TotalCount = tableData.value.length
    } else {
      tableData.value = []
      QueryInfo.TotalCount = 0
    }
  })
}
const addSheepDeath = () => {
  router.push('/SheepDeathAddView')
}
const editSheepDeath = (row: any) => {
  router.push({ name: 'SheepDeathAddView', query: { id: row.Id } })
}
const deleteSheepDeath = (row: any) => {
  ElMessageBox.confirm('是否删除当前羊只死亡记录？', '删除确认', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    Sheep_BreedingWrite.delete('/api/SheepDeath/delete', { params: { Id: row.Id } }).then(res => {
      if (res.data && res.data.code === 200) {
        ElMessage.success(res.data.msg || '删除成功')
        show()
      } else {
        ElMessage.error(res.data.msg || '删除失败')
      }
    })
  })
}
const toggleStatus = async (row: any) => {
  const newStatus = row.ReproductiveStatus === '启用' ? '禁用' : '启用'
  const data = { ...row, ReproductiveStatus: newStatus }
  try {
    const res = await Sheep_BreedingWrite.put('/api/SheepDeath/update', data)
    if (res.data && res.data.code === 200) {
      ElMessage.success('状态切换成功')
      show()
    } else {
      ElMessage.error(res.data.msg || '切换失败')
    }
  } catch (e) {
    ElMessage.error('切换失败')
  }
}
onMounted(() => {
  show();
})
</script>

<style scoped>
.sheep-death-container {
  min-height: 100vh;
  background: #fff;
  padding: 0 0 24px 0;
}
.pagination-section {
  margin: 16px 0 0 0;
  text-align: right;
}
</style> 